<template>
	<view class="flex-row">
		<image @click="discount" class="discount-img" src="https://terminator.axu9.com/images/bujin-discount-icon.png" mode=""></image>
		<input type="number" class="input-class" :style="{'width': width+'rpx'}" v-model="inputValue" @input="input"/>
		<image @click="plus" class="plus-img" src="https://terminator.axu9.com/images/bujin-plus-icon.png" mode=""></image>
	</view>
</template>

<script>
	export default {
		props: {
			width: {
				type: String,
				default: "139"
			}
		},
		data() {
			return {
				inputValue: 0
			}
		},
		methods: {
			input(e){
				console.log(e,e.detail,'input')
				if(e.detail.value != ''){
					this.$emit('change',this.inputValue)
				}else {
					this.$emit('change',0)
				}
				
			},
			discount(){
				if(this.inputValue == 0){
					uni.showToast({
						title: '最小值为0',
						icon: 'none'
					})
					return
				}
				this.inputValue--;
				this.$emit('change',this.inputValue)
			},
			plus(){
				this.inputValue++;
				this.$emit('change',this.inputValue)
			}
		}
	}
</script>

<style>
	@import url("../../static/css/common.css");
	.discount-img {
		width: 40rpx;
		height: 40rpx;
	}
	.plus-img {
		width: 40rpx;
		height: 40rpx;
	}
	.input-class {
		/* width: 139rpx; */
		text-align: center;
		font-weight: 600;
		font-size: 40rpx;
		color: #151515;
	}
</style>
